<template>
    <div id="e-signature">
        <el-dialog
            title="电子签名"
            v-model="isSignDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="750px" 
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <Vue3Esign
                ref="signaRef"
                :width="600"
                :height="300"
                :line-width="4"
                :line-color="lineColor"
                :bgColor='bgColor'
                :is-crop="isCrop"
                :is-clear-bg-color="isClearBgColor"
                style="margin: auto;"
            ></Vue3Esign>
            <template #footer>
                <el-button type="warning" @click="handelClear">清屏</el-button>
                <el-button @click="cancelUseClick">关闭</el-button>
                <el-button type="primary" :loading="repeatDisSign" :disabled="repeatDisSign" @click="saveImage">提交</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref , computed, watch } from 'vue';
import { ElButton, ElDialog , ElMessage } from 'element-plus';
import { Vue3Esign } from 'vue3-esign';
export default defineComponent( {
    name: 'e-signature',
    components: { Vue3Esign },
    props: {
        isSignDialog:{
            type: Boolean,
            default: false,
        }
    },
    setup(props,ctx){
        const repeatDisSign = ref(false);
        const signaRef: any = ref(null);

        /*** 生成图片 */
        const saveImage = async() => {
            repeatDisSign.value = true;
            try{
                if(signaRef.value){
                    let res: any = await signaRef.value.generate();
                    ctx.emit('controlSignClick', res);
                    repeatDisSign.value = false;
                }
            }
            catch(error){
                ElMessage({
                    type: 'warning',
                    message: '请完成电子签名',
                    duration: 1000,
                    onClose: () => {
                        repeatDisSign.value = false;
                    }
                });
            }
        }

        /*** 清屏 */
        const handelClear = async() => {
            signaRef.value.reset();
        }

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            cancelUseClick();
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            signaRef.value.reset();
            ctx.emit('cancelSignClick')
        }

        /*** 监听isSignDialog的变化 */
        watch(() => props.isSignDialog,(newVal) => {
            if(newVal){
                repeatDisSign.value = false;
            }
        })

        /*** isSignDialog 响应弹窗的关闭  */
        const isSignDialog = computed(() => {
            return props.isSignDialog
        })

        return {
            handleClose,
            cancelUseClick,
            repeatDisSign,
            isSignDialog,
            saveImage,
            lineColor: '#000000',
            bgColor: 'rgb(255,255,255)',
            isMargin: 'auto',
            isCrop: true,
            isClearBgColor: false,
            handelClear,
            signaRef,
        }
    },
} )
</script>
<style scoped lang="scss">
#e-signature{
    width: 100%;
}
</style>